<template>
  <div id="canvas_panel" class="context_panels" style="display: block">
    <h4 class="clearfix">
      {{
        nameType == "svg-rect"
          ? "矩形"
          : nameType == "svg-font"
          ? "文本"
          : nameType == "svg-image"
          ? "图形"
          : nameType == "svg-qr-code"
          ? "二维码"
          : nameType == "svg-barcode"
          ? "条形码"
          : ""
      }}
    </h4>
    <!-- 矩形选择 -->
    <div
      class="cursor_measurement"
      v-if="nameType != 'svg-font' && nameType != ''"
    >
      <div class="cursor_wide">
        <span>组件类型：</span>
        <a-select style="width: 50%" size="small" v-model:value="type" disabled>
          <a-select-option
            v-for="item in typeList"
            :key="item.type"
            :value="item.type"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </div>
    </div>
    <!-- 图片 Start -->
    <div v-if="type == 'svg-image'">
      <div class="cursor_measurement">
        <div class="cursor_tall">
          <span
            >提示：如果图像链接以及本地选择图片都有值，将以本地选择图片为优先</span
          >
        </div>
      </div>
      <div class="cursor_measurement">
        <div class="cursor_wide">
          <span>图像链接</span>
          <a-input
            size="small"
            v-model="$store.state.networkimgurl"
            @change="networkimgurlFun"
          />
        </div>
      </div>
      <div class="cursor_measurement">
        <div class="cursor_tall">
          <span>从本地选择图片</span>
          <a-input
            disabled
            size="small"
            v-model="$store.state.localityimgurl"
          />
        </div>
      </div>
      <img :src="imgSrc" alt="" />
      <div class="cursor_measurement">
        <div class="cursor_tall">
          <input
            ref="img-upload-input"
            class="img-upload-input"
            type="file"
            accept=".png, .jpg"
            @change="handleChange"
          />
        </div>
      </div>
    </div>
    <!-- 图片 End -->
    <!-- 线条 Strat -->
    <div v-if="nameType == 'svg-rect'"></div>
    <!-- 线条 End -->
    <!-- 条形码 Start -->
    <div v-if="type == 'svg-barcode'">
      <div class="cursor_measurement">
        <span>条码不显示数字</span>
      </div>
      <div class="cursor_measurement">
        <a-select
          style="width: 50%"
          size="small"
          @change="sourcesChange"
          v-model="$store.state.sourcesInfo.sourcesID"
        >
          <a-select-option
            v-for="(item, index) in sourcesList"
            :key="item.dataSourceID"
            :value="item.dataSourceID"
            >{{ item.dataSourceName }}</a-select-option
          >
        </a-select>
      </div>
      <div class="cursor_measurement">
        <a-select
          style="width: 100%"
          size="small"
          @change="fieldChange"
          v-model="$store.state.fieldInfo.dataFieldID"
        >
          <a-select-option
            v-for="item in barcodetwoList"
            :value="item.dataFieldID"
            :key="item.dictionaryName"
            >{{ item.dataFieldDesc }}</a-select-option
          >
        </a-select>
      </div>
      <div class="cursor_measurement">
        <span>数据源编码</span>
      </div>
      <div class="cursor_measurement">
        <a-textarea
          v-model:value="$store.state.fieldInfo.dictionaryName"
          disabled
          :rows="4"
        />
      </div>
    </div>
    <!-- 条形码End -->

    <!-- 二维码BOX Strat -->
    <div v-if="type == 'svg-qr-code'">
      <div class="cursor_measurement">
        <a-select
          style="width: 50%"
          size="small"
          @change="sourcesChange"
          v-model="$store.state.sourcesInfo.sourcesID"
        >
          <a-select-option
            v-for="(item, index) in sourcesList"
            :key="item.dataSourceID"
            :value="item.dataSourceID"
            >{{ item.dataSourceName }}</a-select-option
          >
        </a-select>
      </div>
      <div class="cursor_measurement">
        <a-select
          style="width: 100%"
          size="small"
          @change="fieldChange"
          v-model="$store.state.fieldInfo.dataFieldID"
        >
          <a-select-option
            v-for="item in barcodetwoList"
            :value="item.dataFieldID"
            :key="item.dictionaryName"
            >{{ item.dataFieldDesc }}</a-select-option
          >
        </a-select>
      </div>
      <div class="cursor_measurement">
        <span>数据源编码</span>
      </div>
      <div class="cursor_measurement">
        <a-textarea
          v-model="$store.state.fieldInfo.dictionaryName"
          disabled
          :rows="4"
        />
      </div>
    </div>
    <!-- 二维码BOX End -->
    <!-- 文本box  Strat-->
    <div v-if="nameType == 'svg-font'">
      <div class="cursor_measurement">
        <div class="cursor_tall">
          <span>静态时文本</span>
          <a-input
            disabled
            size="small"
            v-model="$store.state.figureParameter.value"
          />
        </div>
      </div>
      <div class="cursor_measurement">
        <span>数据来源</span>
      </div>
      <div class="cursor_measurement">
        <a-select
          style="width: 100%"
          size="small"
          @change="sourcesChange"
          v-model="$store.state.sourcesInfo.sourcesID"
        >
          <a-select-option
            v-for="(item, index) in sourcesList"
            :key="item.dataSourceID"
            :value="item.dataSourceID"
            >{{ item.dataSourceName }}</a-select-option
          >
        </a-select>
      </div>
      <div class="cursor_measurement">
        <a-select
          style="width: 100%"
          size="small"
          @change="fieldChange"
          v-model="$store.state.fieldInfo.dataFieldID"
        >
          <a-select-option
            v-for="item in barcodetwoList"
            :value="item.dataFieldID"
            :key="item.dictionaryName"
            >{{ item.dataFieldDesc }}</a-select-option
          >
        </a-select>
      </div>
      <div class="cursor_measurement">
        <span>数据源编码</span>
      </div>
      <div class="cursor_measurement">
        <a-textarea
          v-model:value="$store.state.fieldInfo.dictionaryName"
          disabled
          :rows="4"
        />
      </div>
      <!-- <div class="cursor_measurement">
        <span>自定义数据源格式</span>
        <a-button size="small">帮助</a-button>
      </div> -->
      <!-- <div class="cursor_measurement">
        <a-textarea v-model:value="value" :rows="4" />
      </div> -->
    </div>
    <!-- 文本Box End -->
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {
  GetDataSourceName,
  GetDataFieldToDataSourceID,
  GetempletFieldRelationToRelationId,
} from "@/api/LabelTemplate/index";
import { deprecationHandler } from "moment";
export default {
  data() {
    return {
      value: "",
      nameType: "",
      authorization: "authorization-text",
      type: "img",
      localityimgurl: "", //本地文件
      networkimgurl: "", //网络链接
      imgSrc: "",
      typeList: [
        { name: "图像", type: "svg-image" },
        { name: "框线", type: "svg-rect" },
        { name: "条形码", type: "svg-barcode" },
        { name: "二维码", type: "svg-qr-code" },
      ], //组件类型
      barcodetwoList: [], //数据字段
      sourcesList: [], //数据来源
    };
  },
  methods: {
    ...mapMutations([
      "changeImg",
      "changeSources",
      "networkFun",
      "localityFun",
    ]),

    //选择了数据来源后处理
    sourcesChange(value) {
      const data = { type: 1, value };
      this.changeSources(data);
      this.GetDataFieldToDataSourceIDFun(value);
    },
    fieldChange(value) {
      const obj = this.barcodetwoList.find((item) => item.dataFieldID == value);
      console.log(obj);
      const data = { type: 2, value: obj };
      this.changeSources(data);
    },
    //查询数据来源
    async GetDataSourceNameFun() {
      const res = await GetDataSourceName("");
      if (res.code == 200) {
        this.sourcesList = res.body;
      }
    },

    //查询数据字段
    async GetDataFieldToDataSourceIDFun(id) {
      const res = await GetDataFieldToDataSourceID(id);
      if (res.code == 200) {
        this.barcodetwoList = res.body;
      }
    },

    //查询数据关系字段
    async GetempletFieldRelationToRelationIdFun(id) {
      const res = await GetempletFieldRelationToRelationId(id);
    },
    // 图片file转base64方法（file文件，回调函数）

    //图像链接
    networkimgurlFun(e) {
      this.networkFun(this.networkimgurl);
    },
    //本地选择图片
    handleChange(info) {
      // this.$refs["img-upload-input"].click();
      const files = info.target.files;
      this.localityimgurl = info.target.value;
      const rawFile = files[0]; // only use files[0]
      this.fileToBase64(rawFile, (res) => {
        if (res.status) {
          const obj = {
            files: res.data,
            localityimgurl: info.target.value,
          };
          this.localityFun(obj);
        } else {
        }
      });
    },
    fileToBase64(file, callback) {
      // 创建FileReader对象（不兼容IE）
      let reader = new FileReader();
      // 将file转为base64 （异步操作）
      reader.readAsDataURL(file);
      // 转换成功
      reader.onload = () => {
        const response = {
          status: true,
          data: reader.result,
        };
        callback(response);
      };
      // 转换失败
      reader.onerror = function () {
        const response = {
          status: false,
          data: reader.error,
        };
        callback(response);
      };
    },
  },
  mounted() {},
  watch: {
    "$store.state.frameType"(newvalue, oldvalue) {
      this.nameType = this.$store.state.frameType;
      this.type = this.$store.state.frameType;
      this.GetDataSourceNameFun();
    },
    "$store.state.sourcesInfo": {
      handler(newvalue, oldValue) {
        if (newvalue.sourcesID) {
          this.GetDataFieldToDataSourceIDFun(newvalue.sourcesID);
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.context_panels {
  h4 {
    color: #ffffff !important;
    font-size: 0.8rem;
  }
  .cursor_measurement {
    margin-bottom: 0.425rem;
    display: flex;
    span {
      color: white;
    }
    .cursor_wide {
      span {
        color: white;
      }
      flex: 1;
    }
    .cursor_tall {
      span {
        color: white;
      }
      flex: 1;

      .ant-select {
        margin-top: 0.625rem;
      }
    }
  }
  .information_box {
    margin-bottom: 0.625rem;
  }
}
</style>
